<!--  -->
<template>
  <div>
    <ul>
      <li v-for="(item,index) in detailList"
          :key="index">
        <!-- 一.路由的query参数 -->
        <!-- 1. 跳转并携带query参数，to的字符串写法 -->
        <!-- <router-link to="/home/message/detail?id=01&title=xxx">{{item.title}}</router-link> -->
        <!-- <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link> -->
        <!-- <router-link to="/home/message/detail?id="
                     +item.id+"&title="+item.title>{{item.title}}</router-link> -->

        <!-- 2. 跳转并携带query参数，to的对象写法 -->
        <router-link :to="{
         path:'/home/message/detail',
          query:{
            id:item.id,
            title:item.title
          }
        }">{{item.title}}</router-link>

        <!-- 二.通过params方式传递参数 -->
        <!-- 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！ -->
        <!-- <router-link :to="{
          name:'xiangqing',
          params:{
            id:item.id,
            title:item.title
          },
        }">
          {{item.title}}
        </router-link> -->
        <button @click="pushShow(item)">push查看</button>
        <button @click="replaceShow(item)">replace查看</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data () {
    return {
      detailList: [
        { id: "001", title: "信息001" },
        { id: "002", title: "信息002" },
        { id: "003", title: "信息003" },
        { id: "004", title: "信息004" },
      ]
    }
  },
  methods: {
    pushShow (item) {
      // 编程式导航
      this.$router.push({
        path: '/home/message/detail',
        query: {
          id: item.id,
          title: item.title
        }
      });
    },
    replaceShow (item) {
      this.$router.push({
        path: '/home/message/detail',
        query: {
          id: item.id,
          title: item.title
        }
      });
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  beforeDestroy () {
    // 证明News组件被销毁了
    console.log("Message组件即将被销毁了");
  },
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>